<template>
  <div class="zhu" style="width: 540px; height: 100%; ">
    <div style=" height: 40px;  ">
      <span class="jianbian" style=" width: 100%; line-height: 50px; padding-left: 30px; font-size: 24px;">无人售货销量TOP5</span>
    </div>
    <div style=" height: 400px; " ref="cylinder">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  mounted() {
    this.getcylinder()
  },
  methods: {
    getcylinder() {
      const cylinder = this.$refs.cylinder
      const myChart = this.$echarts.init(cylinder)

      const option = {
        // backgroundColor: '',
        color: ['#66e7f9', '#e74b4a', '#ffb534', '#f01475', '#4261f9', '#ff1578', '#00ff4e'],
        legend: {
          icon: 'square',
          top: '15%',
          right: '5%',
          textStyle: {
            color: '#fff'
          },
          itemWidth: 10,
          itemHeight: 10,
          data: ['难度']
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '22%',
          left: '15%',
          right: '5%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#2d4b83',
              width: '0.5'
            }
          },
          axisLabel: {
            interval: 0,
            rotate: 0, // 文字倾斜
            textStyle: {
              color: '#62B4BB', // x轴字体颜色文字大小配置
              fontSize: '20' // 文字大小
            },
            formatter(val) {
              return '{a|' + `${val.slice(0, 5)}\n${val.slice(5)}` + '}'
            },
            rich: {
              a: {
                height: 20, // 设置字体行高
                fontSize: '14' // 文字大小
              }
            }
            // formatter: function (value) { // X轴的内容
            //   let ret = '' // 拼接加\n返回的类目项
            //   const max = 4 // 每行显示的文字字数
            //   const val = value.length // X轴内容的文字字数
            //   const rowN = Math.ceil(val / max) // 需要换的行数
            //   if (rowN > 1) { // 判断 如果字数大于2就换行
            //     for (let i = 0; i < rowN; i++) {
            //       let temp = '' // 每次截取的字符串
            //       const start = i * max // 开始截取的位置
            //       const end = start + max // 结束截取的位置
            //       temp = value.substring(start, end) + '\n'
            //       ret += temp // 最终的字符串
            //     }
            //     return ret
            //   } else { return value }
            // }
          },
          data: ['北京外国语实验学校', '京东养车店', '石门果蔬', '贵友大厦', '惠通河惠生家园', '果佰颗店']
        },
        yAxis: [
          {
            nameTextStyle: {
              fontSize: 14,
              color: '#fff'
            },
            type: 'value',
            axisLine: {
              lineStyle: {
                show: false,
                type: 'solid',
                color: 'transparent',
                width: '0.5'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#62B4BB', // y轴字体颜色文字大小配置
                fontSize: '20'
              }
            },
            splitLine: {
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: ['#2d4b83'],
                width: 0.5,
                type: 'solid'
              }
            }
          }
        ],
        series: [
          {
            // name: '难度',
            // barGap: '50%',

            type: 'bar',
            // barWidth: '40',
            barWidth: '40%',
            // 添加图片主要配置
            label: {
              show: true,
              position: 'top',
              distance: 5,
              formatter(value, index) {
                // console.log(value)
                let str = ''
                if (value.dataIndex === 0) {
                  str = '{a|} '
                } else if (value.dataIndex === 1) {
                  str = '{b|} '
                } else if (value.dataIndex === 2) {
                  str = '{c|} '
                }
                return str
              },
              // 设置图片
              rich: {
                a: {
                  align: 'center',
                  padding: [0, 0, 2, 0],
                  width: 35,
                  height: 30,
                  color: '#fff',
                  backgroundColor: {
                    image:
                      ''
                  }
                },
                b: {
                  align: 'center',
                  padding: [0, 0, 2, 0],
                  width: 24,
                  height: 35,
                  color: '#fff',
                  backgroundColor: {
                    image:
                      ''
                  }
                },
                c: {
                  align: 'center',
                  padding: [0, 0, 2, 0],
                  width: 24,
                  height: 35,
                  color: '#fff',
                  backgroundColor: {
                    image:
                      ''
                  }
                }
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#41E1D4' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#4261f9' // 100% 处的颜色
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0,255,225,1)',
                shadowBlur: 3
              }
            },
            data: [100, 70, 60, 50, 40, 35]
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.zhu {
  background-image: url(../../assets/地图背景图/边框.png);
  background-size: 100% 100%;
}
.jianbian {
  background: linear-gradient(to top, rgb(71, 242, 254) 0%, rgb(166, 253, 252) 70%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
</style>
